<template>
	<view class="comments-warp">
		<view
			class="comment-list"
			v-for="(comment, index) in commentData"
		>
			<view class="comment-face">
				<u-avatar :src="comment.author.avatar"></u-avatar>
			</view>
			<view class="comment-body">
				<view class="comment-top">
					<text>{{ comment.author.username }}</text>
				</view>
				<view class="comment-content">{{ comment.content }}</view>
				<view class="comment-date">
					<text>{{ comment.createdAt }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { getComment } from '@/common/api/cardApi.js';
import { mapState } from 'vuex';
export default {
	name: 'comment-page',
	data() {
		return {
			commentData: []
		};
	},
	props: {
		comment: {
			type: Array
		}
	},
	methods: {
		...mapState({
			userInfo: (state) => state.user.userInfo
		}),
		getComment(e) {
			const that = this;
			const comment = {
				author: {
					avatar: this.userInfo().avatar,
					username: this.userInfo().username
				},
				content: e,
				createdAt: this.$moment().format('YYYY-MM-DD HH:mm')
			};
			this.commentData.unshift(comment);
		}
	},
	watch: {
		comment: {
			handler(newComment, oldComment) {
				this.commentData = newComment;
			},
			deep: true
		}
	},
	mounted() {
		uni.$on('reloadComment', this.getComment);
	}
};
</script>

<style lang="scss">
.comments-warp {
	width: 100%;
	margin-top: 20rpx;

	.comment-list {
		width: 100%;
		display: flex;
		margin-top: 20rpx;
		position: relative;
		&::after {
			position: absolute;
			content: '';
			width: 90%;
			height: 1px;
			background-color: #eee;
			top: 100%;
			left: 50%;
			transform: translate(-50%, -50%);
		}
		.comment-body {
			margin-left: 10rpx;
			.comment-top {
				font-size: 12px;
				color: #444;
			}
			.comment-content {
				font-size: 14px;
				margin-top: 10rpx;
				width: 90%;
			}
			.comment-date {
				font-size: 12px;
				color: #999;
			}
		}
	}
}
</style>
